<template>
  <div class="new-brand main-body">
    <div class="new-brand-title clearfix">
      <img src="@/assets/img/template-item2/icons/zhuangshileft.png" alt="">
      <h3>最新入住品牌</h3>
      <img src="@/assets/img/template-item2/icons/zuangshiright.png" alt="">
    </div>
    <div class="new-brand-body clearfix">
      <div v-for="i in 14" :key="i" class="nbrand left">
        <div class="logo">
          <img src="../../../../assets/img/template-item2/brands/2.png" alt="">
        </div>
        <h3>大奔</h3>
      </div>
    </div>
    <button>查看更多</button>
    &nbsp;
    &nbsp;
    &nbsp;
    &nbsp;
    <button>品牌入住</button>
  </div>
</template>

<script>
export default {
  name: 'NewBrand',
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../../assets/template-item2/css/base';
.new-brand{
  @include btn;
  text-align: center;
  margin: 40px auto;
  .new-brand-title{
    @include panel;
    img{
      width: 470px;
    }
  }
  .new-brand-body{
    margin: 40px 45px;
    width: 100%;
    .nbrand{
      width: 156px;
      text-align: center;
      .logo{
        width: 132px;
        height: 74px;
        display: flex;
        margin: 0 auto;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        border: 1px solid #ccc;
        img{
          max-width: 132px;
          max-height: 74px;
        }
      }
    }
    h3{
      font-size:18px;
      font-weight:600;
      line-height:24px;
      margin: 20px auto;
    }
  }
}
</style>
